<script setup>
import { ref } from 'vue'
import { validateUsername, validatePassword } from './validate'
import QqLogin  from './QqLogin.vue.vue'
import SliderCaptcha from './SliderCaptcha.vue'
import {
  Form as VeeForm,
  Field as VeeField,
  ErrorMessage as VeeErrorMessage
} from 'vee-validate'
import { useStore } from 'vuex'
import router from '@/router'
import WxLogin from './WxLogin.vue'
const store = useStore()
//控制验证码的显示和隐藏
const visible = ref(false)
//发起登录
const loginData = ref({
  username: '',
  password: ''
})
const goLogin = async () => {
  const res = await store.dispatch('sys/login', loginData.value)
  if (res) {
    router.push('/')
  }
}
const goRegister = () => {
  router.push('/register')
}
</script>
<template>
  <div class="container md:bg-slate-100 md:h-screen md:pt-14">
    <div
      class="content pt-12 px-4 md:w-3/12 md:mx-auto md:bg-white md:rounded-md"
    >
      <!-- 图标 -->
      <div class="logo mx-auto">
        <img
          src="https://res.lgdsunday.club/my-avatar.jpg"
          alt=""
          class="h-16 mx-auto md:hidden"
        />
        <h3 class="hidden md:block text-red-500 text-center font-bold">
          登录账号
        </h3>
      </div>
      <vee-form @submit="visible = true">
        <!-- 用户名 -->
        <div class="border-slate-300 border-b border-b-slate-300">
          <vee-field
            name="username"
            :rules="validateUsername"
            v-model="loginData.username"
          >
          </vee-field>
        </div>
        <vee-error-message
          name="username"
          class="text-sm text-red-600 block mt-0.5 text-left"
        ></vee-error-message>

        <!-- 密码 -->
        <div class="border-slate-300 border-b border-b-slate-300">
          <vee-field
            name="password"
            :rules="validatePassword"
            v-model="loginData.password"
          >
          </vee-field>
        </div>
        <vee-error-message
          name="password"
          class="text-sm text-red-600 block mt-0.5 text-left"
        ></vee-error-message>
        <!-- 去注册 -->
        <div class="float-right text-gray-400 mb-2" @click="goRegister">
          去注册
        </div>
        <!-- 登录 -->
        <button
          type="submit"
          class="clear-both bg-red-500 rounded-md text-slate-200 text-xl text-center p-2 mb-16 block w-full mx-auto"
        >
          登录
        </button>
      </vee-form>

      <!-- 第三方登录  -->
      <div class="icon-box flex justify-around md:pb-10">
        <QqLogin />
        <WxLogin />
      </div>
      <SliderCaptcha
        v-if="visible"
        @close="visible = false"
        @captcha-success="goLogin"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
